import React, { useEffect } from "react";
import { Routes, Route } from "react-router-dom";
import { HomeOutlined, SettingOutlined } from "@ant-design/icons";
import { Welcome } from "@ant-design/x";

import Index from "./views/index/Index";
import Setting from "./views/setting/Setting";
import BottomMenu from "./components/BottomMenu";
import FrpcServerActions from "./components/FrpcServerActions";
import { useLoading } from "./components/LoadingProvider"; // 引入你的 Loading hook
import LogoIcon from "./assets/loading/psyduck.svg";
import "./AppWrapper.css"; // <-- 引入样式
import { Tag } from "antd";

const menuItems = [
  { key: "home", label: "首页", icon: <HomeOutlined />, path: "/" },
  {
    key: "setting",
    label: "设置",
    icon: <SettingOutlined />,
    path: "/setting",
  },
];

const AppWrapper: React.FC = () => {
  const { showLoading, hideLoading } = useLoading();
  useEffect(() => {
    showLoading();
    const timer = setTimeout(() => {
      hideLoading();
    }, 2000);

    return () => clearTimeout(timer);
  }, []);

  return (
    <main className="container" style={{ paddingBottom: "60px" }}>
      <Welcome
        icon={
          <img src={LogoIcon} alt="koala" style={{ width: 40, height: 40 }} />
        }
        title={
          <span style={{ paddingLeft: "20px", fontSize: 18, fontWeight: 700 }}>
            frpc 内网穿透客户端
          </span>
        }
        description={
          <div>
            <div style={{ marginBottom: 8 }}>
              <Tag color="blue">
                 <a
                  href="https://github.com/fatedier/frp"
                  target="_blank"
                  rel="noopener noreferrer"
                  style={{ color: "inherit" }}
                >
                  FRP
                </a>
              </Tag>
              <Tag color="blue">FRPC</Tag>
              <Tag color="green">客户端</Tag>
              <Tag color="green">内网穿透</Tag>
              <Tag color="orange">内测版本</Tag>

              <Tag color="geekblue">
                <a
                  href="https://gitee.com/dev-linhu"
                  target="_blank"
                  rel="noopener noreferrer"
                  style={{ color: "inherit" }}
                >
                  GITEE
                </a>
              </Tag>
            </div>
          </div>
        }
        extra={<FrpcServerActions />}
      />

      <Routes>
        <Route path="/" element={<Index />} />
        <Route path="/setting" element={<Setting />} />
      </Routes>
      <BottomMenu items={menuItems} />
    </main>
  );
};

export default AppWrapper;
